import { PureComponent } from 'react';
import './index.less'
import { Fire, Arrow } from '@react-vant/icons';
import Lazyimg from 'react-lazyimg-component';
import loadingpng from '@/assets/loading.png';
import WithRouter from '@/router/WithRouter';
import { Skeleton } from 'react-vant';
class TopList extends PureComponent {
  render() {
    let { topList } = this.props;
    return (
      <Skeleton row={3} loading={topList.length===0} rowWidth={['100%',"100%","100%"]} rowHeight={[80,80,80]} round={false}>
      <div className="goodsTop">
        <div className="title">
          <Fire color="#ee0a24" />商品排行榜
          <span className="more">更多 <Arrow /></span>
        </div>
        <div className="goods">
          {
            topList.map(item => {
              return (
                <div className="goods_item" key={item.id} onClick={()=>{
                  this.props.router.navigate(`/info/${item.id}`)
                }}>
                  <div className="item_img">
                  <Lazyimg className="lazy" src={item.image} placeholder={<img src={loadingpng} alt='加载失败'/>}/>
                  </div>
                  <div className="item_info">
                    <div className="name">
                   {item.storeName}
                    </div>
                    <div><span className="price">  ￥{item.price}</span>
                      <span className="sale">销量{item.sales}件</span></div>
                  </div>
                </div>
              )
            })
          }
        </div>
      </div>
      </Skeleton>
    )
  }
}
export default WithRouter(TopList) ;